<template>
	<div class="codeConter">
		<div class="codeConter-top">
			<div class="codeConter-mul">
				<el-menu class="el-menu-demo" default-active="1" mode="horizontal" @select="handleSelect">
					<el-submenu index="1">
						<template slot="title">{{ titleValue }}</template>
						<el-menu-item index="/web/code">界面生成</el-menu-item>
						<el-menu-item index="/web/entity">实体生成</el-menu-item>
						<el-menu-item index="/web/reward">分润维度</el-menu-item>
					</el-submenu>
				</el-menu>
				<div class="codeConter-mt1">选择实体类</div>
				<div class="codeConter-mt2">
					<el-select style="width: 600px;margin: 0 20px;" v-model="paraModel.entity" filterable placeholder="请选择"
						size="medium" @change="leftInit">
						<el-option v-for="(item, index) in options" :key="index" :label="item.value" :value="item.key">
						</el-option>
					</el-select>
				</div>
				<el-button type="primary" size="medium" @click="codeBase">代码全局生成</el-button>
			</div>
			<el-tabs class="codeConter-tabs" v-model="paraModel.uiType" @tab-click="handleClick">
				<el-tab-pane :label="tItem.value" :name="tItem.key" v-for="(tItem, tIndex) in tabsList"
					:key="tIndex"></el-tab-pane>
			</el-tabs>
		</div>
		<div class="codeConter-bottom">
			<div class="codeConter-left">
				<div class="codeConter-hp1_ot1" style="border-top: none;">{{ dataModel.name }}生成设置</div>
				<div class="codeConter-hp2">
					<div class="codeConter-left_li" v-for="(gItem, gIndex) in dataModel.fields" :key="gIndex">
						<div class="codeConter-left_lable">{{ gItem.name }}<span class="codeConter-left_required"
								v-if="gItem.isRequired">*</span></div>
						<div class="codeConter-left_file">
							<div v-if="gItem.maxCount > 0">
								<div class="codeConter-left_ftop" v-for="(qItem, qIndex) in viewModel[gItem.field]" :key="qIndex">
									<div class="codeConter-left_komt0" v-if="gItem.controlsType == 6">
										<el-select v-model="viewModel[gItem.field][qIndex]" filterable :placeholder="gItem.placeHolder"
											size="medium">
											<el-option v-for="item in fileModel[gIndex]" :key="item.value" :label="item.value"
												:value="item.key"></el-option>
										</el-select>
									</div>
									<div class="codeConter-left_komt0" v-if="gItem.controlsType == 2">
										<el-input v-model="viewModel[gItem.field][qIndex]" :placeholder="gItem.placeHolder"
											size="medium"></el-input>
									</div>
									<div class="codeConter-left_komt0" v-if="gItem.controlsType == 15">
										<el-switch v-model="viewModel[gItem.field][qIndex]" active-color="#716aca" inactive-color="#ff4949"
											style="margin-top: 8px;"></el-switch>
									</div>
									<div class="codeConter-left_add" @click="addChange(gItem, fileModel[gIndex])"
										v-if="qIndex == 0 && viewModel[gItem.field].length < gItem.maxCount">+</div>
									<div class="codeConter-left_add" style="border-color: red;color: red;"
										@click="deleteChange(gItem, qIndex)" v-else>-</div>
								</div>
							</div>
							<div v-else>
								<div v-if="gItem.controlsType == 6">
									<el-select v-model="viewModel[gItem.field]" filterable ::placeholder="gItem.placeHolder" size="medium">
										<el-option v-for="item in fileModel[gIndex]" :key="item.value" :label="item.value"
											:value="item.key"></el-option>
									</el-select>
								</div>
								<div v-else-if="gItem.controlsType == 2">
									<el-input v-model="viewModel[gItem.field]" :placeholder="gItem.placeHolder" size="medium"></el-input>
								</div>
								<div v-else-if="gItem.controlsType == 15">
									<el-switch v-model="viewModel[gItem.field]" active-color="#716aca" inactive-color="#ff4949"
										style="margin-top: 8px;"></el-switch>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="codeConter-hp1_ot1">{{ dataModel.name }}操作步骤</div>
				<div class="codeConter-hp1">
					<div class="codeConter-hp1_ot2" v-for="(oItem, oIndex) in dataModel.steps" :key="oIndex">第{{ oIndex + 1
					}}步:{{
	oItem }}</div>
				</div>
			</div>
			<div class="codeConter-right">
				<div class="codeConter-right_rtop">
					<div class="codeConter-right_rli" v-for="(cItem, cIndex) in dataModel.styles" :key="cIndex">
						<div class="codeConter-right_mconter" :class="{ 'codeConter-right_active': selectCurrentIndex == cIndex }"
							@click="selectCurrentIndex = cIndex">
							<el-image ref="myImg" class="codeConter-right_kImg" :src="cItem.image"></el-image>
							<el-image-viewer v-if="dialogVisible" :zIndex="99999" :on-close="closeImgViewer" :url-list="imgList"
								:initial-index="0" class="codeConter-image-viewer" />
							<div class="codeConter-right_txt">{{ cItem.name }}</div>
							<div class="codeConter-right_but" @click.stop="largerPicture(cItem.image)">查看大图</div>
						</div>
					</div>
				</div>
				<div class="codeConter-right_rbot">
					<el-input v-model="paraModel.fileName" size="medium" maxlength="30"
						style="margin-right: 15px;flex: 1;min-width: 0;" placeholder="请输入" show-word-limit
						@input="changeMessage()"></el-input>
					<a class="codeConter-right_xlnks" v-if="dataModel.url" :href="$ala.host + '#' + dataModel.url"
						target="_blank">{{ $ala.host +
							'#' + dataModel.url }}</a>
					<el-button type="primary" size="medium" @click="sumbit" :disabled="!dataModel.isSupport">单文件代码生成</el-button>
				</div>
			</div>
			<div class="codeConter-link">
				<div class="codeConter-link_fh1" style="border-top: none;">{{ dataModel.name }}参考地址</div>
				<div class="codeConter-link_gul">
					<div class="codeConter-link_gli" @click="linksTo(gItem)" v-for="(gItem, gIndex) in dataModel.links"
						:key="gIndex">
						<span class="codeConter-link_xdt1">{{ gItem.name }}</span>
						<span class="codeConter-link_xdt2" @click.stop="managementTo(gItem)">后台管理</span>
					</div>
				</div>
				<div class="codeConter-link_fh1">{{ dataModel.name }}功能说明</div>
				<div class="codeConter-link_mark">
					<div class="codeConter-link_mali" v-for="(mItem, mIndex) in dataModel.functions" :key="mIndex">{{ mIndex
						+ 1
					}}、{{
	mItem }}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
	components: {
		ElImageViewer
	},
	data () {
		return {
			titleValue: '界面生成',
			options: [],
			tabsList: [],
			paraModel: {
				entity: '',
				uiType: '',
				fileName: ''
			},
			dataModel: {},
			viewModel: {},
			fileModel: {},
			selectCurrentIndex: 0,
			imgList: [],
			dialogVisible: false
		}
	},
	mounted () {
		this.init()
	},
	methods: {
		async init () {
			var pathValue = this.$route.path
			if (pathValue === '/web/code') {
				this.titleValue = '界面生成'
			} else if (pathValue === '/web/entity') {
				this.titleValue = '实体生成'
			} else {
				this.titleValue = '分润维度'
			}
			this.options = await this.$ala.httpGet('api/CodeService/EntityList')
			this.tabsList = await this.$ala.httpGet('api/CodeService/Tabs')
			this.paraModel = {
				entity: this.options[0].key,
				uiType: this.tabsList[0].key
			}
			this.leftInit()
		},
		handleSelect (e) {
			this.$router.push(e)
		},
		async leftInit () {
			this.viewModel = {}
			this.dataModel = {}
			this.dataModel = await this.$ala.httpPost('api/CodeSetting/Setting', this.paraModel)
			if (this.dataModel.fields.lenght !== 0) {
				this.selectInit(this.dataModel.fields)
			}
			this.paraModel.fileName = this.dataModel.fileName
		},
		handleClick (tab, event) {
			this.paraModel.uiType = tab.name
			this.leftInit()
		},
		largerPicture (data) { //大图预览
			this.imgList = []
			this.imgList.push(data)
			this.dialogVisible = true
		},
		closeImgViewer () {
			this.dialogVisible = false
		},
		managementTo (xData) { //后台管理跳转
			if (xData.image) {
				window.open(xData.image, '_blank')
			}
		},
		async selectInit (data) {
			var this_ = this
			data.forEach(async (res, vIndex) => {
				if (res.apiUrl) { //有apiUrl逻辑判断
					var arrayList = await this.$ala.httpGet(res.apiUrl)
					if (arrayList.length !== 0) {
						this_.$set(this_.viewModel, res.field, arrayList[0].key)
					}
					this_.$set(this_.fileModel, vIndex, arrayList)
				}
				if (res.maxCount > 0) { //maxCount大于0表示有多条数据
					var listObject = [] // 数组即可
					if (res.default) { //有默认值字段时执行
						listObject.push(res.default)
					} else {
						if (this_.fileModel[vIndex].length !== 0) { //没有默认值字段时执行，且当前数剧不为空时
							listObject.push(this_.fileModel[vIndex][0].key)
						} else {
							listObject.push('')
						}
					}
					this_.viewModel[res.field] = listObject
				}
				if (res.default) { //有默认值字段时执行
					this_.$set(this_.viewModel, res.field, res.default)
				}
			})
		},
		changeMessage () {
			this.$forceUpdate()
		},
		linksTo (vData) {
			window.open(this.$ala.host + 'pages/index.html#' + vData.url)
		},
		addChange (kData, arrayValue) {
			if (arrayValue.length !== 0) {
				this.viewModel[kData.field].push(arrayValue[0].key)
			} else {
				this.viewModel[kData.field].push('')
			}
		},
		deleteChange (cData, cIndex) {
			this.viewModel[cData.field].splice(cIndex, 1)
		},
		async sumbit () { //单文件代码生成
			var para = {
				uiType: this.paraModel.uiType,
				entity: this.paraModel.entity,
				style: this.dataModel.styles[this.selectCurrentIndex].style,
				formType: this.dataModel.formType,
				fileName: this.paraModel.fileName,
				value: JSON.stringify(this.viewModel)
			}
			var response = await this.$ala.httpPost('api/CodeGeneration/Create', para)
			if (response) {
				this.$notify({
					title: '成功',
					message: '代码生成成功，请检查',
					type: 'success',
					position: 'bottom-right'
				})
			}
		},
		async codeBase () { //代码全局生成
			var para = {
				entity: this.paraModel.entity
			}
			var response = await this.$ala.httpGet('api/GenerationBaseService/Generation', para)
			if (response) {
				this.$notify({
					title: '成功',
					message: '代码生成成功，请检查',
					type: 'success',
					position: 'bottom-right'
				})
			}
		}
	}
}
</script>
<style lang="scss">
.codeConter {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.el-tabs__item {
		padding: 0 10px;
	}

	.codeConter-top {
		.codeConter-mul {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30px 0 0;
			border-bottom: 1px solid #e5e5e5;

			.codeConter-mt1 {
				font-size: 15px;
				margin-left: 10px;
			}

			.codeConter-mt2 {
				flex: 1;
				min-width: 0;
			}
		}

		.codeConter-tabs {
			margin: 0;
			padding-top: 20px;

			.el-tabs__item {
				color: #000000;
			}

			.el-tabs__header {
				margin: 0;
			}

			.el-tabs__item.is-active {
				color: #716aca !important;
			}
		}
	}

	.codeConter-bottom {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: row;
		padding: 10px;

		.codeConter-left {
			width: 380px;
			border: 1px solid #e5e5e5;
			display: flex;
			flex-direction: column;

			.codeConter-hp1 {
				padding: 10px 15px;
				height: 200px;
				overflow: auto;

				.codeConter-hp1_ot2 {
					font-size: 13px;
					color: #999;
					line-height: 2;
				}
			}

			.codeConter-hp1_ot1 {
				font-size: 15px;
				color: #333333;
				line-height: 3;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
				padding: 0 15px;
			}

			.codeConter-hp2 {
				flex: 1;
				min-height: 0;
				overflow: auto;
				padding-left: 10px;
			}

			.codeConter-left_li {
				padding: 10px 15px 10px 0;
				cursor: pointer;
				display: flex;
				flex-direction: row;

				.codeConter-left_lable {
					width: 120px;
					text-align: right;
					font-size: 14px;
					color: rgba(#000000, 0.7);
					margin-right: 10px;
					margin-top: 6px;
				}

				.codeConter-left_lable+.codeConter-left_lable {
					margin-top: 8px;
				}

				.codeConter-left_required {
					color: red;
					font-size: 20px;
					vertical-align: middle;
				}

				.codeConter-left_file {
					flex: 1;
					min-width: 0;
				}

				.codeConter-left_ftop {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.codeConter-left_komt0 {
					flex: 1;
					min-width: 0;
				}

				.codeConter-left_ftop+.codeConter-left_ftop {
					margin-top: 10px;
				}

				.codeConter-left_add {
					width: 30px;
					height: 30px;
					line-height: 25px;
					border-radius: 30px;
					border: 1px solid #e5e5e5;
					font-size: 30px;
					color: rgba(#333, 0.5);
					text-align: center;
					margin-left: 10px;
				}

				&:hover {
					background-color: rgba(#e5e5e5, 0.2);
				}
			}

			.codeConter-left_li+.codeConter-left_li {
				border-top: 1px solid rgba(#e5e5e5, 0.6);
			}
		}

		.codeConter-right {
			flex: 1;
			min-width: 0;
			margin: 0 10px;
			display: flex;
			flex-direction: column;
			border: 1px solid #e5e5e5;

			.codeConter-right_rtop {
				flex: 1;
				min-height: 0;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				overflow: auto;
				padding-right: 10px;
				padding-bottom: 10px;

				.codeConter-right_rli {
					width: 360px;
					padding: 10px 0 0 10px;
				}

				.codeConter-right_mconter {
					width: 100%;
					background-color: #e5e5e5;
					border-radius: 6px;
					border: 3px solid #e5e5e5;
					cursor: pointer;
					position: relative;
					overflow: hidden;

					.codeConter-right_kImg {
						width: 100%;
						display: block;
					}

					.codeConter-right_txt {
						background-color: rgba(0, 0, 0, 0.2);
						font-size: 15px;
						color: #fff;
						padding: 8px 10px;
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
					}

					.codeConter-right_but {
						display: none;
						position: absolute;
						top: 0;
						right: 0;
						background-color: #34bfa3;
						font-size: 13px;
						color: #fff;
						padding: 6px 16px;
						border-bottom-left-radius: 6px;
					}
				}

				.codeConter-right_mconter:hover {
					.codeConter-right_but {
						display: block;
					}
				}

				.codeConter-right_active {
					border: 3px solid red;
				}
			}

			.codeConter-right_rbot {
				border-top: 1px solid #e5e5e5;
				padding: 10px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.codeConter-right_xlnks {
					font-size: 14px;
					color: #999;
					margin-right: 15px;
					cursor: pointer;

					&:hover {
						text-decoration: underline;
					}
				}
			}
		}

		.codeConter-link {
			width: 240px;
			border: 1px solid #e5e5e5;
			display: flex;
			flex-direction: column;

			.codeConter-link_h1 {
				font-size: 15px;
				text-align: center;
				font-weight: bold;
				padding: 12px 10px;
				border-bottom: 1px solid #e5e5e5;
			}

			.codeConter-link_gul {
				flex: 1;
				min-height: 0;
				overflow: auto;

				.codeConter-link_gli {
					padding: 12px 15px;
					cursor: pointer;
					display: flex;
					flex-direction: row;
					align-items: center;

					.codeConter-link_xdt1 {
						font-size: 14px;
						color: rgba(#000000, 0.6);
						flex: 1;
						min-width: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.codeConter-link_xdt2 {
						display: none;
						font-size: 13px;
						color: #716aca;
					}

					&:hover {
						background-color: rgba(#e5e5e5, 0.2);

						.codeConter-link_xdt2 {
							display: block;
						}
					}
				}

				.codeConter-link_gli+.codeConter-link_gli {
					border-top: 1px solid rgba(#e5e5e5, 0.3);
				}
			}

			.codeConter-link_fh1 {
				font-size: 15px;
				color: #333;
				font-size: 15px;
				color: #333333;
				line-height: 3;
				border-top: 1px solid #e5e5e5;
				border-bottom: 1px solid #e5e5e5;
				padding: 0 15px;
			}

			.codeConter-link_mark {
				padding: 0 15px 10px 15px;
				height: 200px;
				overflow: auto;

				.codeConter-link_mali {
					font-size: 13px;
					color: #999;
					line-height: 2;
				}
			}
		}
	}
}

.codeConter-image-viewer {
	.el-image-viewer__mask {
		opacity: 1;
	}
}
</style>